<template>
  <div class="myvip">
    <div>
      <div class="head">
        <span>当前VIP等级：{{ $store.state.user.vip | vipLevel }}</span>
        <img :src="vipLogo" alt="">
      </div>

      <el-progress
        class='vip_progress'
        :percentage="percentage"
        :color="customColors"
        :format="format">
      </el-progress>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      vipLogo: 'require("~/assets/img/支付宝.svg"),',
      percentage: 20,
      customColor: '#409eff',
      customColors: [
        {color: '#f56c6c', percentage: 20},
        {color: '#e6a23c', percentage: 40},
        {color: '#5cb87a', percentage: 60},
        {color: '#1989fa', percentage: 80},
        {color: '#6f7ad3', percentage: 100}
      ]
    }
  },
  methods: {
    format(percentage) {
      // return percentage === 100 ? '满' : `${percentage}%`;
      // switch (percentage) {
      //   case percentage < 25 :
      //     return 'vip1'
      // }
      if (percentage <= 20) {
        return '普通会员'
      } else if (percentage < 40 && percentage >= 20 ) {
        return '铜牌会员'
      } else if (percentage < 60 && percentage >= 40) {
        return '银牌会员'
      } else if (percentage < 80 && percentage >= 60) {
        return '金牌会员'
      } else if (percentage < 100 && percentage >= 80) {
        return '钻石会员'
      }
    }
  }
}
</script>

<style lang='less' type='text/css'>
  .myvip {
    padding: 20px;
    .vip_progress {
      margin-top: 20px;
      padding: 0 50px;
      .el-progress__text {
        margin-top: 10px;
      }
    }
  }
</style>
